<!--
 * new page
 * @author: YK
 * @since: 2024-06-04
 * ControlPanel.vue
-->
<template>
  <div class="container">
    <draggable
      :list="PanelList"
      ghost-class="ghost"
      chosen-class="chosenClass"
      class="draggable"
      item-key="id"
      group="people"
      @change="log"
    >
      <template #item="{ element }">
        <component :is="element.component" @dblclick="currentHandle(element)" ></component>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { useWidgetsStore } from "@/store/widgets";
import { storeToRefs } from "pinia";
import draggable from "vuedraggable";
const widgetsStore = useWidgetsStore();
const { PanelList } = storeToRefs(widgetsStore);

const log = (evt: DragEvent) => {
  window.console.log(evt, "???a", PanelList.value);
};
const currentHandle=(item)=>{
  console.log(item,"item");
  widgetsStore.setCurrentComponentAction(item)
}
</script>

<style scoped lang="scss">
.container {
  width: 375px;
  height: 650px;
  background-color: #fff;
  overflow: hidden;
  cursor: pointer;
  overflow: auto;
}
::v-deep .ant-spin-nested-loading,
::v-deep .ant-spin-container,
::v-deep .set-bg-color-box,
::v-deep .draggable,
::v-deep .fill-box {
  height: 100%;
}
.container::-webkit-scrollbar {
  display: none;
  overflow: auto;
}
</style>
